<template>
    <div class="main">
        <!-- 装饰背景 -->
        <div class="bg-decoration"></div>
        
        <!-- 装饰元素 -->
        <div class="decor-element decor-1"></div>
        <div class="decor-element decor-2"></div>
        
        <div class="register-container">
            <div class="register-box shadow-depth">
                <!-- 登录入口 -->
                <div class="login-link" @click.prevent="routerLogin">
                    <span>{{ $t('system.login') }}</span>
                    <i class="el-icon-arrow-left transition-transform ml-1"></i>
                </div>
                
                <!-- 注册标题 -->
                <div class="register-header">
                    <h2 class="register-title">{{ $t('system.registerName') }}</h2>
                    <p class="register-subtitle">{{ $t('system.registerDesc') || '创建账号，开始智能通讯之旅' }}</p>
                </div>
                
                <!-- 注册表单 -->
                <div class="register-form">
                    <el-tabs v-model="activeName" @tab-click="handleClick" class="register-tabs">
                        <el-tab-pane :label="$t('system.accountRegister')" name="first">
                            <!-- 账号注册 -->
                            <AccountRegister class="form-content" />
                        </el-tab-pane>
                        <el-tab-pane :label="$t('system.SmsRegister')" name="second">
                            <!-- 短信注册 -->
                            <SmsRegister class="form-content" />
                        </el-tab-pane>
                    </el-tabs>
                </div>
                
                <!-- 分隔线 -->
                <div class="divider">
                    <span>{{ $t('system.otherWays') }}</span>
                </div>
                
                <!-- 第三方注册 -->
                <div class="social-register">
                    <button class="social-btn hover-scale" @click="otherRegister('gitee')">
                        <gitee class="social-icon" />
                        <span>Gitee</span>
                    </button>
                    <button class="social-btn hover-scale" @click="otherRegister('github')">
                        <github3 class="social-icon" />
                        <span>GitHub</span>
                    </button>
                    <button class="social-btn hover-scale" @click="otherRegister('qq')">
                        <qq class="social-icon" />
                        <span>QQ</span>
                    </button>
                </div>
            </div>
        </div>
        
        <Footer class="footer" />
    </div>
</template>

<script>
import gitee from '@/assets/icon/gitee.svg'
import qq from '@/assets/icon/qq.svg'
import github3 from '@/assets/icon/github3.svg'
import AccountRegister from "./AccountRegister";
import SmsRegister from "./SmsRegister";
import Footer from "../../components/Common/Footer";
import config from "@/config/config"

export default {
    components: {
        gitee,
        qq,
        github3,
        AccountRegister,
        SmsRegister,
        Footer
    },
    data() {
        return {
            activeName: "first",
        }
    },
    methods: {
        handleClick(tab, event) {
            // 标签切换处理
        },
        routerLogin() {
            this.$router.push("/login")
        },
        otherRegister(command) {
            // 第三方注册逻辑
            switch (command) {
                case 'gitee':
                    window.open('https://gitee.com/oauth/authorize?client_id=' + config.GiteeLogin.clientID +
                        '&redirect_uri=' + config.GiteeLogin.redirectUri + '&response_type=code', '_self');
                    break;
                case 'github':
                    window.open('https://github.com/login/oauth/authorize?client_id=' + config.GitHubLogin.clientID +
                        '&redirect_uri=' + config.GitHubLogin.redirectUri + '&scope=user', '_self');
                    break;
                case 'qq':
                    window.open('https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' + config.QQ.clientID +
                        '&redirect_uri=' + config.QQ.redirectUri + '&scope=user', '_self');
                    break;
            }
        }
    }
}
</script>

<style scoped lang="scss">
// 主题变量，与登录页面保持一致
$primary: #4361ee;
$primary-light: #6287ff;
$primary-dark: #3a56d4;
$secondary: #3f37c9;
$light: #f8f9fa;
$dark: #212529;
$gray: #6c757d;
$light-gray: #e9ecef;
$white: #ffffff;

// 动画效果
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes float-delay {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

// 通用动画类
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.08);
}

.transition-transform {
    transition: transform 0.3s ease;
}

.shadow-depth {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 
                0 1px 3px rgba(0, 0, 0, 0.1);
}

// 主页面样式
.main {
    position: relative;
    min-height: 100vh;
    background-color: $light;
    // 已移除背景图
    overflow: hidden;
    
    // 背景装饰
    .bg-decoration {
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: linear-gradient(135deg, $primary, $primary-light);
        top: -200px;
        right: -100px;
        opacity: 0.15;
        filter: blur(80px);
        animation: float 12s ease-in-out infinite;
    }
    
    // 装饰元素
    .decor-element {
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        z-index: 1;
    }
    
    .decor-1 {
        width: 150px;
        height: 150px;
        top: 20%;
        left: 20%;
        transform: rotate(45deg);
        animation: float 8s ease-in-out infinite;
    }
    
    .decor-2 {
        width: 100px;
        height: 100px;
        bottom: 25%;
        right: 25%;
        border-radius: 50%;
        animation: float-delay 10s ease-in-out infinite;
    }
    
    // 注册容器
    .register-container {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 60px 20px;
        min-height: calc(100vh - 60px); // 减去footer高度
    }
    
    // 注册框
    .register-box {
        width: 100%;
        max-width: 420px;
        background: $white;
        border-radius: 20px;
        padding: 50px 40px 40px;
        position: relative;
        animation: fadeIn 0.6s ease-out forwards;
        
        // 登录入口链接
        .login-link {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            color: $primary;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            
            &:hover {
                color: $primary-dark;
            }
            
            &:hover .transition-transform {
                transform: translateX(-5px);
            }
        }
        
        // 注册标题区
        .register-header {
            margin-bottom: 35px;
            
            .register-title {
                font-size: 28px;
                font-weight: 700;
                color: $dark;
                margin-bottom: 10px;
                position: relative;
                display: inline-block;
                
                &::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: -5px;
                    width: 40px;
                    height: 3px;
                    background: $primary;
                    border-radius: 2px;
                }
            }
            
            .register-subtitle {
                font-size: 15px;
                color: $gray;
                line-height: 1.6;
                margin-top: 20px;
            }
        }
        
        // 注册表单
        .register-form {
            margin-bottom: 25px;
            
            .register-tabs {
                .el-tabs__nav {
                    justify-content: center;
                    margin-bottom: 25px;
                }
                
                .el-tabs__item {
                    font-size: 16px !important;
                    padding: 0 25px !important;
                    color: $gray !important;
                    position: relative;
                    
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 0;
                        height: 2px;
                        background-color: $primary;
                        transition: width 0.3s ease;
                    }
                    
                    &:hover {
                        color: $primary !important;
                    }
                    
                    &.is-active {
                        color: $primary !important;
                        font-weight: 600 !important;
                        
                        &::after {
                            width: 100%;
                        }
                    }
                }
                
                .el-tabs__active-bar {
                    display: none;
                }
                
                .form-content {
                    padding: 10px 0;
                }
            }
        }
        
        // 分隔线
        .divider {
            position: relative;
            text-align: center;
            margin: 25px 0;
            
            &::before, &::after {
                content: '';
                position: absolute;
                top: 50%;
                width: 40%;
                height: 1px;
                background: linear-gradient(to right, transparent, $light-gray, transparent);
            }
            
            &::before { left: 0; }
            &::after { right: 0; }
            
            span {
                display: inline-block;
                padding: 0 16px;
                background-color: $white;
                font-size: 13px;
                color: $gray;
                position: relative;
                z-index: 1;
            }
        }
        
        // 第三方注册
        .social-register {
            display: flex;
            justify-content: center;
            gap: 25px;
            
            .social-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 70px;
                height: 70px;
                background-color: $light;
                border: none;
                border-radius: 14px;
                cursor: pointer;
                transition: all 0.3s ease;
                
                &:hover {
                    background-color: $primary;
                    box-shadow: 0 8px 16px rgba(67, 97, 238, 0.2);
                    
                    .social-icon {
                        color: $white !important;
                    }
                    
                    span {
                        color: $white;
                    }
                }
                
                .social-icon {
                    width: 26px;
                    height: 26px;
                    margin-bottom: 8px;
                    transition: all 0.3s ease;
                    
                    &.gitee { color: #c71d23; }
                    &.github3 { color: #333; }
                    &.qq { color: #12b7f5; }
                }
                
                span {
                    font-size: 13px;
                    color: $gray;
                    transition: all 0.3s ease;
                }
            }
        }
    }
    
    // 页脚
    .footer {
        position: relative;
        z-index: 2;
        padding: 16px;
        text-align: center;
        font-size: 13px;
        color: $gray;
        background-color: rgba(255,255,255,0.8);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255,255,255,0.5);
    }
}

// 响应式设计
@media (max-width: 768px) {
    .main {
        .register-container {
            padding: 40px 15px;
        }
        
        .register-box {
            padding: 40px 25px 30px;
            max-width: 100%;
            
            .social-register {
                gap: 15px;
                
                .social-btn {
                    width: 65px;
                    height: 65px;
                }
            }
        }
    }
}
</style>
